<!--<div id="system" (contextmenu)="goBack($event)" (keydown)="getKey($event)" tabindex="1" (focus)="getFocus()">-->
<div id="Boxs" (contextmenu)="goBack($event)">
  <div id="content-box">
    <div id="flexCon">
      <div class="flex-row">
        <div class="flex-cell flex-cell-a">
          <div class="chart-wrapper-a">
            <header id="content-header">
              <div class="todaytimes">
                <p>{{ dateTimes[0] }}</p>
                <p>{{ dateTimes[1] }}</p>
                <p>{{ dateTimes[2] }}</p>
                <p>{{ dateTimes[3] }}</p>
                <p>年</p>
                <p>{{ dateTimes[4] }}</p>
                <p>{{ dateTimes[5] }}</p>
                <p>月</p>
                <p>{{ dateTimes[6] }}</p>
                <p>{{ dateTimes[7] }}</p>
                <p>日</p>

                <p> - </p>

                <p>{{ dateMonths[0] }}</p>
                <p>{{ dateMonths[1] }}</p>
                <p>时</p>
                <p>{{ dateMonths[2] }}</p>
                <p>{{ dateMonths[3] }}</p>
                <p>分</p>
                <p>{{ dateMonths[4] }}</p>
                <p>{{ dateMonths[5] }}</p>
                <p>秒</p>
              </div>
              <div class="content-tit">
                <div class="head-logo" (click)="virtualKeyDown($event,'',2)" title="单击退出页面，双击选择公司">
                  <img src="assets/tmp/img/bi/swzx_02.png"/>
                </div>
                <div class="head-nav" *ngFor="let head of headList">
                  <div class="head-top" *ngFor="let i of head.titleData">
                    <p>{{ i.lable }}</p>
                    <b>{{ titleData[i['feild']] }}</b>
                  </div>
                </div>
              </div>
            </header>
          </div>

          <div class="chart-wrapper-b flex-cell-ar">
            <div class="chart-table">
              <div class="left-tables" *ngFor="let report of leftList">
                <div class="left-title">
                  <p class="left-t" title="点击显示搜索车辆信息" (click)="carOpen()"> 车辆总控 </p>
                  <p class="left-p">
                    <span>当前页：<span style="color: #fff">{{ tablesIndex + 1 }}</span></span>
                    <span style="margin-left: 20px">共 {{ reportData.length }} 页</span>
                  </p>
                </div>
                <table [ngStyle]="{ width: report.tabWidth + '%' }"
                       style="table-layout: fixed;">
                  <thead>
                  <tr>
                    <td *ngFor="let header of report.allleft" [ngStyle]="{ width: header.width + '%'  }">
                      <span>{{ header.headerName }}</span>
                    </td>
                  </tr>
                  </thead>
                  <div class="tab-div"></div>
                  <tbody>
                  <tr *ngFor="let page of reportData[tablesIndex],let i = index"
                      id="{{i}}"
                      tabindex="1"
                      [class.checkData]=" (page.JJCDH == CheckId) && (page.CPHM == carNum) && (page.JCID == JCID) "
                      class="reportData"
                      (dblclick)="virtualKeyDown($event,page,1)"
                      (keydown)="virtualKeyDown($event,page)"
                      (focus)="getFocus(i)">
                    <!-- 车牌号码 - 门店 -->
                    <td><span>
                    <img class="logo"
                         [src]="page['TPLJ'] ? 'http://yyftp.jekunauto.com/' + page['TPLJ'] : 'http://yyftp.jekunauto.com/default/Logo51*51.png' "/>
                    {{ page['CPHM'] }}</span>
                    </td>
                    <!-- 图标 -->
                    <td style="padding-left: 1px">
                      <span *ngIf="page['SPCBJ'] === '是'" class="logo-bj"> 水浸 </span>
                      <span *ngIf="page['FWCSBJ'] === 1 " class="logo-bj"> 超时 </span>
                    </td>
                    <!-- 门店 -->
                    <td><span>{{ page['MDMC'] }}</span></td>
                    <!-- 当前节点 -->
                    <td><span>{{ page['JD'] }}</span></td>
                    <!-- 接车时间 -->
                    <td><span>{{ timesMDHD(page['JCRQ_SJ']) }}</span></td>
                    <!-- 预计交车时间 -->
                    <td><span>{{ timesMDHD(page['YJJCRQ_SJ']) }}</span></td>
                    <td><span>{{ toHourMinute(page['HJCS']) }} / {{ toHourMinute(page['JCBEYONDTIME']) }}</span></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <div class="flex-cell flex-cell-b margin-l">
          <div class="chart-wrapper">
            <!-- 头部 车牌信息 -->
            <div class="right-top">
              <div style="display: flex; position: relative; top: -7px;" *ngFor="let icon of iconData">
                <div style="display: flex">
                  <div class="box-logo">
              <span class="logo-icon">
                <img [src]=" carIcon ? 'http://yyftp.jekunauto.com/' + carIcon : 'http://yyftp.jekunauto.com/default/Logo51*51.png'">
              </span>
                  </div>
                  <div>
                    <div style="display: flex">
                      <div class="car-num">{{ rightList['CPHM'] }}</div>
                      <div class="logo-tit" *ngIf="rightList['BXGSMC'] !== undefined">定损({{ rightList['BXGSMC'] }})
                      </div>
                      <div class="logo-tit" *ngIf="rightList['ZFCBJ'] == 1">自费车</div>
                      <div class="logo-tit" *ngIf="rightList['CARPLACEMC'] !== undefined">定位:{{ rightList['CARPLACEMC']
                        }}
                      </div>
                      <div class="logo-tit" *ngIf="rightList['FWLXMC'] !== undefined">{{ rightList['FWLXMC'] }}</div>
                      <div class="logo-tit" *ngIf="rightList['FXCMC'] !== undefined">{{ rightList['FXCMC'] }}</div>
                    </div>
                    <div style="display: flex">
                      <div class="car-info">{{ rightList['CHXMC'] }} {{ rightList['PZCXMC'] }}</div>
                      <!--{{ rightList['QCCPMC'] }}   {{ rightList['CHXMC'] }}-->
                      <div class="box-icon">
                        <!-- 环检 -->
                        <div class="icon">
                  <span>
                    <img class="icon-img"
                         [src]=" (icon['HJ']=== 1) ? 'assets/tmp/img/bi/clB1.png' : 'assets/tmp/img/bi/clB.png' "/>
                  </span>
                          <!--<i style="display: block"><img class="icon-yes"-->
                          <!--[src]="(icon['HJ'] === 1) ?  './assets/tmp/img/bi/clE.png' :  './assets/tmp/img/bi/jinggao.png' "/></i>-->
                        </div>
                        <!-- 36项 -->
                        <div class="icon">
                <span>
                  <img class="icon-img"
                       [src]=" (icon['TSJ'] === 1) ? 'assets/tmp/img/bi/clC1.png' : 'assets/tmp/img/bi/clC.png' "/>
                </span>
                          <!--<i style="display: block"><img class="icon-yes"-->
                          <!--[src]=" (icon['TSJ'] === 1) ?  './assets/tmp/img/bi/clE.png' :  './assets/tmp/img/bi/jinggao.png' "/></i>-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>

            <div *ngIf="tracking !== undefined">
              <div class="box-top" *ngIf="tracking.length > 0">
                <!-- title -->
                <div class="tit">
                  <div class="tit-col"></div>
                  <div class="tit-tit"><span>{{ tracking[0]['title'] }}</span></div>
                </div>

                <!-- table 服务跟踪 -->
                <div class="fwgd">
                  <div class="tab-fwgd">
                    <div class="fwgd-head">
                      <div></div>
                      <div></div>
                      <div>待施工</div>
                      <div>到货时间</div>
                      <div>开始施工</div>
                      <div>完成施工</div>
                      <div>质检完成</div>
                      <div>暂停时长</div>
                      <div>耗时</div>
                    </div>
                    <div class="fwgd-sp" *ngFor="let item of tracking">
                      <div>{{ item['XH'] }}</div>
                      <div>{{ item['FWGZ'] }}</div>
                      <div>{{ timeChange(item['DSG']) }}</div>
                      <div>{{ timeChange(item['DHSJ']) }}</div>
                      <div>{{ timeChange(item['KSSG']) }}</div>
                      <div>{{ timeChange(item['WCSG']) }}</div>
                      <div>{{ timeChange(item['ZJWC']) }}</div>
                      <div>{{ toHourMinute(item['ZTSC']) }}</div>
                      <div>{{ toHourMinute(item['HS']) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 底部 动态信息 -->
            <div class="right-tabs">
              <div class="flex-cell flex-cell-c" style="margin-right: 10px">
                <div *ngFor="let data of cryData">
                  <car-panel [parmas]="data"></car-panel>
                </div>

                <div *ngFor="let data of cryDataThree">
                  <car-minutia [parmas]="data"></car-minutia>
                </div>

                <div *ngFor="let data of cryDataFour">
                  <car-panel [parmas]="data"></car-panel>
                </div>
              </div>
              <div class="flex-cell flex-cell-d">
                <div class="box" *ngIf="remarkData.length > 0" title='点击录入备注' (click)="entryOpen()">
                  <div *ngFor="let item of remarkData">
                    <div
                      style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                      {{ item['JLYY'] }}
                    </div>
                    <div>
                      <span style="margin-right: 5px; padding-left: 60%">{{ item['JLRMC'] }} </span>
                      <span>{{ timeChange(item['LRRQ_SJ']) }}</span>
                    </div>
                  </div>
                </div>

                <div *ngFor="let data of carDataFri">
                  <car-panel [parmas]="data"></car-panel>
                </div>

                <div *ngFor="let data of carDataTwo">
                  <car-panel [parmas]="data"></car-panel>
                </div>

                <div *ngFor="let data of cryDataOne">
                  <car-minutia [parmas]="data"></car-minutia>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="main-copy">-->
      <!--Copyright-->
      <!--<i class="anticon anticon-copyright"></i>-->
      <!--2019 本系统由猿猿软件提供技术支持-->
    <!--</div>-->
  </div>

  <company-modal (paramsOut)="changeCompany($event)"></company-modal>
  <!-- 车辆抽屉事件 -->
  <apes-drawer [apesWidth]="'40%'" [apesClosable]="'true'" [apesBodyStyle]="{ overflow: 'auto'}"
               [apesVisible]="carVisible" apesTitle="快速查找车辆" (apesOnClose)="carClose()" [apesPlacement]="'left'">

    <div class="right-drawer-footer">
      <button apes-button [apesType]="'primary'" (click)="carQuery()" style="margin-right: 8px;"><span>查询</span>
      </button>
      <button apes-button [apesType]="'default'" (click)="carClean()"><span>重置</span></button>
    </div>

    <div style="margin-top: 35px;">
      <div apes-col [apesMd]="24">
        <apes-form-item>
          <apes-form-control apes-col [apesMd]="24">
            <apes-radio-group [(ngModel)]="radioValue" [apesButtonStyle]="'solid'">
              <label apes-radio-button *ngFor="let list of queryList" [apesValue]="list['KEY']">
                <span>{{ list['TITLE'] }} {{ list['LABLE'] }}</span>
              </label>
            </apes-radio-group>
          </apes-form-control>
        </apes-form-item>
      </div>

      <div apes-col [apesMd]="12">
        <apes-form-item>
          <apes-form-label apes-col [apesMd]="6">接车时间</apes-form-label>
          <apes-form-control apes-col [apesMd]="17">
            <apes-range-picker [(ngModel)]='pickCarTime' [apesFormat]="'yyyy-MM-dd'"></apes-range-picker>
          </apes-form-control>
        </apes-form-item>
      </div>

      <div apes-col [apesMd]="12">
        <apes-form-item>
          <apes-form-label apes-col [apesMd]="6">车牌号码</apes-form-label>
          <apes-form-control apes-col [apesMd]="17">
            <input type="text" apes-input placeholder="请输入车牌号码" [(ngModel)]="carNumber">
          </apes-form-control>
        </apes-form-item>
      </div>

      <div apes-col [apesMd]="12">
        <apes-form-item>
          <apes-form-label apes-col [apesMd]="6">车辆状态</apes-form-label>
          <apes-form-control apes-col [apesMd]="17">
            <ng-select [items]="carStatus"
                       bindLabel="label"
                       bindValue="key"
                       clearAllText [placeholder]="'选填'" [(ngModel)]="carStatusId" [notFoundText]="'无法找到'"
                       typeToSearchText>
            </ng-select>
          </apes-form-control>
        </apes-form-item>
      </div>

      <div apes-col [apesMd]="12">
        <apes-form-item>
          <apes-form-label apes-col [apesMd]="6">门店</apes-form-label>
          <apes-form-control apes-col [apesMd]="17">
            <ng-select clearAllText
                       [items]="carStore"
                       bindLabel="MDMC"
                       bindValue="MDID"
                       [placeholder]="'选填'" [notFoundText]="'无法找到'" typeToSearchText [(ngModel)]="carStoreId">
            </ng-select>
          </apes-form-control>
        </apes-form-item>
      </div>

      <div apes-col [apesMd]="12">
        <apes-form-item>
          <apes-form-label apes-col [apesMd]="6">定损进度</apes-form-label>
          <apes-form-control apes-col [apesMd]="17">
            <ng-select [items]="damage"
                       bindLabel="DSJDMC"
                       bindValue="DSJDID"
                       clearAllText [placeholder]="'选填'" [(ngModel)]="damageId" [notFoundText]="'无法找到'"
                       typeToSearchText>
            </ng-select>
          </apes-form-control>
        </apes-form-item>
      </div>

      <div apes-col [apesMd]="12">
        <apes-form-item>
          <apes-form-label apes-col [apesMd]="6">汽车厂牌</apes-form-label>
          <apes-form-control apes-col [apesMd]="17">
            <input type="text" apes-input placeholder="请输入汽车厂牌" [(ngModel)]="carBrands">
          </apes-form-control>
        </apes-form-item>
      </div>

      <div apes-col [apesMd]="12">
        <apes-form-item>
          <apes-form-control apes-col [apesMd]="24">
            <label apes-col [apesMd]="5" apes-checkbox [(ngModel)]="checkOne">定损车</label>
            <label apes-col [apesMd]="5" apes-checkbox [(ngModel)]="checkTwo">返修车</label>
            <label apes-col [apesMd]="5" apes-checkbox [(ngModel)]="checkThe">年审车</label>
            <label apes-col [apesMd]="5" apes-checkbox [(ngModel)]="checkFro">水浸车</label>
          </apes-form-control>
        </apes-form-item>
      </div>
    </div>
  </apes-drawer>
  <!-- 录入备注抽屉事件 -->
  <apes-drawer [apesWidth]="'30%'" [apesClosable]="'true'" [apesBodyStyle]="{ overflow: 'auto'}"
               [apesVisible]="entryVisible" apesTitle="录入备注" (apesOnClose)="entryClose()" [apesPlacement]="'right'">

    <div class="right-drawer-footer">
      <button apes-button [apesType]="'primary'" (click)="entryGetNewInfo()" style="margin-right: 8px;"><span>提交</span>
      </button>
      <!--<button apes-button [apesType]="'default'" (click)="carClean()" ><span>重置</span></button>-->
    </div>

    <div style="margin-top: 35px;">
      <div apes-col [apesMd]="24">
        <apes-form-item>
          <apes-form-control apes-col [apesMd]="23">
            <textarea rows="4" apes-input [(ngModel)]="setReview"
                      placeHolder="'如果有任何的不满意的地方，请及时反馈，我们期待您的任何建议'"></textarea>
          </apes-form-control>
        </apes-form-item>
      </div>

      <div apes-col [apesMd]="24" style="max-height: 600px; overflow: auto">
        <apes-form-item>
          <apes-form-control apes-col [apesMd]="23">
            <div *ngFor="let item of review">
              <div style="overflow: hidden; text-overflow: ellipsis;
                          display: -webkit-box; -webkit-line-clamp: 3;
                          -webkit-box-orient: vertical;">
                {{ item['JLYY'] }}
              </div>
              <div>
                <span style="margin-right: 5px; padding-left: 60%">{{ item['JLRMC'] }} </span>
                <span>{{ timeChange(item['LRRQ_SJ']) }}</span>
              </div>
            </div>
          </apes-form-control>
        </apes-form-item>
      </div>
    </div>
  </apes-drawer>
</div>

<company-modal (paramsOut)="changeCompany($event)"></company-modal>
